import { useRef, useEffect } from 'react';
import { Animated } from 'react-native';

const HeightIncreaseAni = (props) => {
  const heightAnim = new Animated.Value(0)  // 透明度初始值设为0

  useEffect(() => {
    Animated.timing(                  // 随时间变化而执行动画
        heightAnim,                       // 动画中的变量值
      {
        toValue: 200,                   // 透明度最终变为1，即完全不透明
        duration: 200,              // 让动画持续一段时间
        useNativeDriver: true
    }
    ).start();                        // 开始执行动画
  }, [heightAnim])

  return (
    <Animated.View                 // 使用专门的可动画化的View组件
      style={{
        width: '100%',
        maxHeight: heightAnim,         // 将透明度绑定到动画变量值
      }}
    >
      {props.children}
    </Animated.View>
  );
}

export default HeightIncreaseAni